import React from 'react';
import css from './index.less';
import { observer } from 'mobx-react';
import Group from 'components/config/group';
import Range from 'components/config/range';
import BaseConfig from 'modules/common/config';

import Bull from 'components/config/zoho/bull';
import Whxy from 'components/config/zoho/whxy';
import FontFamily from 'components/config/zoho/fontFamily';
import InputNum from 'components/config/zoho/inputNum';
import TextProps from 'components/config/zoho/textProps';
import Stroke from 'components/config/zoho/stroke';
import Icon from 'components/icon';
import Color from 'components/config/color';
import Level from 'components/config/zoho/level';
import * as CONST from 'common/const';
import ScrollArea from 'components/scrollArea';

@observer
export default class TextConfig extends BaseConfig {
  title = '文本设置';

  // 属性
  renderAttrConfig() {
    const { mod } = this.props;
    const groupProps = {
      defaultActiveKey: [0, 1, 2, 3, 4],
      list: [
        {
          title: '基本设置',
          children: (
            <Bull key="1" title="位置">
              <Whxy label="X" left={45} inputValue={mod.left} onChange={ val => {
                mod.update('left', val);
              }}/>
              <Whxy label="Y" left={105} inputValue={mod.top} onChange={ val => {
                mod.update('top', val);
              }}/>
            </Bull>
          )
        },
        {
          title: '字体字号',
          children: (
            <div>
              <Bull key="0" title="字体">
                <FontFamily />
              </Bull>
              <Bull key="1" title="">
                <InputNum label="字号" numValue={mod.fontSize} mod={mod} type="number"/>
                <div className={css.fontWrap}>
                  <Color label="字体颜色"
                         show={false}
                         color={mod.color}
                         onChange={color => {
                           mod.update('color', color);
                         }} />
                </div>
              </Bull>
              <div className={css.hr}/>
              <TextProps mod={mod}
                         align={mod.isAlign}
              />
            </div>
          )
        },
        {
          title: '字符间距',
          children: (
            <Bull key="0" title="">
              <div className={css.zifu}>
                <InputNum label="字距" numValue={mod.letterSpacing} mod={mod} type="number"/>
                <InputNum label="行距" numValue={mod.lineHeight} mod={mod} type="number"/>
              </div>
            </Bull>
          )
        },
        {
          title: '元素层级顺序',
          children: (
            <Level mod={mod}/>
          )
        },
        {
          title: '样式设置',
          children: (
            <div>
              <div className={css.strokeWrap}>
                <Color label="填充"
                       color={mod.background}
                       onChange={color => {
                         mod.update('background', color);
                       }} />
              </div>
              <div className={css.strokeWrap}>
                <Color label="描边"
                       color={mod.textStrokeColor}
                       onChange={color => {
                         mod.update('textStrokeColor', color);
                       }} />
                <Stroke label="描边" mod={mod} value={mod.textStrokeWidth}/>
              </div>
              <Range label="透明" min={0} max={100} value={mod.opacity} onChange={val => {
                mod.update('opacity', val);
              }}/>
              <Range label="模糊" min={0} max={100} value={mod.blur} onChange={val => {
                mod.update('blur', val);
              }}/>
              <Range label="旋转" min={0} max={360} value={mod.rotate} onChange={val => {
                mod.update('rotate', val);
              }}/>
            </div>
          )
        },
        {
          title: '滤镜设置',
          children: (
            <div>
              <Range label="亮度" min={0} max={200} value={mod.brightness} onChange={val => {
                mod.update('brightness', val);
              }}/>
              <Range label="对比" min={0} max={200} value={mod.contrast} onChange={val => {
                mod.update('contrast', val);
              }}/>
              <Range label="饱和" min={0} max={100} value={mod.saturate} onChange={val => {
                mod.update('saturate', val);
              }}/>
              <Range label="灰度" min={0} max={100} value={mod.grayscale} onChange={val => {
                mod.update('grayscale', val);
              }}/>
              <Range label="加温" min={0} max={100} step={1} value={mod.sepia} onChange={val => {
                mod.update('sepia', val);
              }}/>
              <Range label="色相" min={0} max={360} value={mod.hueRotate} onChange={val => {
                mod.update('hueRotate', val);
              }}/>
              <Range label="反色" min={0} max={100} value={mod.invert} onChange={val => {
                mod.update('invert', val);
              }}/>
            </div>
          )
        },
        {
          title: '元素层级顺序',
          children: (
            <Level mod={mod}/>
          )
        },
      ]
    };
    return (
      <ScrollArea
        style={{
          maxHeight: window.innerHeight - CONST.SIMULATOR_MARGIN_TOP - CONST.HEADER_HEIGHT - 50 - 44 - 50,
        }}
      >
        <Group {...groupProps}/>
      </ScrollArea>
    );
  }
}
